<template>
	<view class="hot-container">
		<view class="search-box" @click="onToSearch">
			<my-search placeholderText="uni-app 自定义组件" />
		</view>
		<view class="tab-sticky">
			<my-tabs class="myTabs" @tabClick="tabClick" :tabData="tabData" :defaultIndex="currentIndex"
				:config="{ textColor: '#333333' }" />
		</view>
		<view>
			<!-- current 表示当前展示哪个 swiperItem -->
			<swiper class="swiper" @animationfinish="onSwiperEnd" :current="currentIndex"
				:style="{ height: currentSwiperHeight + 'px' }" @change="onSwiperChange">
				<swiper-item class="swiper-item" v-for="(tabItem, tabIndex) in tabData" :key="tabIndex">
					<view>
						<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
						<!-- 列表循环数据更改为 listData[tabIndex] -->
						<hot-list-item @click="onItemClick(data)" :class="'hot-list-item-' + tabIndex"
							v-for="(data, index) in listData[tabIndex]" :key="index" :data="data"
							:ranking="index + 1" />
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import { _getHotListFromTabType, _getHotTabs } from '../../api/hot.js'
	export default {
		data() {
			return {
				tabData: [],
				currentIndex: 0,
				listData: {},
				isLoading: true, // loading 加载
				currentSwiperHeight: 0, // 当前 swiper 的高度
				currentPageScrollTop: 0, // 当前的滚动距离
				swiperHeightData: {} // 
			}
		},
		methods: {
			// 解决切换tab时 list 卡顿问题
			onSwiperEnd() {
				// 判断缓存是否有数据，不存在则重新获取数据
				if (!this.listData[this.currentIndex]) {
					this.getHotListFromTab()
					return;
				}
				// 未 return ，则证明存在缓存数据，即同时存在 height 的缓存数据
				this.currentSwiperHeight = this.swiperHeightData[this.currentIndex]
			},
			// 监听 swiper 的切换事件
			onSwiperChange(e) {
				if (this.currentPageScrollTop > 130) {
					// 控制列表滚动位置
					uni.pageScrollTo({
						scrollTop: 60
					})
				}
				this.currentIndex = e.detail.current
			},
			async getHotTabs() {
				const { data: res } = await _getHotTabs()
				this.tabData = res.list
				this.getHotListFromTab()
			},
			async getHotListFromTab() {
				// 如果存在数据就不请求接口
				this.isLoading = true
				const id = this.tabData[this.currentIndex].id
				const { data: res } = await _getHotListFromTabType(id)
				// 放入数据缓存
				this.listData[this.currentIndex] = res.list
				this.isLoading = false
				// 因为 this.$nextTick 存在兼容性问题 所以更推荐使用 setTimeout
				setTimeout(async () => {
					this.currentSwiperHeight = await this.getCurrentSwiperHeight()
					this.swiperHeightData[this.currentIndex] = this.currentSwiperHeight
				}, 0)
				// 放入缓存解决解决性能
			},
			tabClick(index) {
				this.currentIndex = index
				// this.getHotListFromTab()
			},
			/**
			 * 计算当前 swiper 的高度
			 */
			getCurrentSwiperHeight() {
				if (this.swiperHeightData[this.currentIndex]) return
				return new Promise((resolve, reject) => {
					let sum = 0
					const query = uni.createSelectorQuery().in(this)
					query.selectAll(`.hot-list-item-${this.currentIndex}`)
						.boundingClientRect(res => {
							res.forEach(item => {
								sum += item.height
							})
							resolve(sum);
						})
						.exec()
				})
			},
			onToSearch() {
				// 跳转到searchBlog 页面
				uni.navigateTo({
					url: '/subpkg/pages/search-blog/search-blog'
				})
			},
			onItemClick(item) {
				console.log(item)
				uni.navigateTo({
					url: `/subpkg/pages/blog-detail/blog-detail?author=${item.user_name}&articleId=${item.id}`
				})
			}
		},
		// 页面生命周期 监听页面滚动，参数为Object
		onPageScroll(res) {
			this.currentPageScrollTop = res.scrollTop
		},
		created() {
			this.getHotTabs()
		}
	}
</script>

<style lang="scss" scoped>
	.hot-container {
		.search-box {
			padding: 0 20px;
			margin-bottom: $uni-spacing-col-base;
		}

		.tab-sticky {
			position: sticky;
			top: -1px;
			z-index: 99;
			/* #ifndef H5 */
			top: -1;
			/* #endif */
			/* #ifdef H5 */
			top: 40px;
			/* #endif */
		}
	}
</style>
